<template>
	<view>
		<view class="usernameBox">
			<text>完善个人信息</text>
			<view class="cell">
				<text>*手机号</text>
				<view class="cell_box">
					<!-- disabled="disabled"禁止输入框输入信息 -->
					<input v-model="phone" placeholder-style="color:#adadad;" placeholder="请输入手机号" type="number"
						maxlength="11"/>
					<img src="http://106.14.56.171:15016/images/login/u253.png" />
				</view>
			</view>
			<view class="name">
				<text>*真实姓名</text>
				<view class="name_box">
					<input v-model="name" placeholder-style="color:#adadad;" placeholder="请输入" type="text" />
					<img src="http://106.14.56.171:15016/images/login/u253.png" />
				</view>
			</view>
			<view class="company">
				<text>*公司</text>
				<view class="company_box" @click="checkCompanye">
					<input v-model="companyName" placeholder-style="color:#adadad;" disabled placeholder="请选择"
						type="text" />

					<img src="http://106.14.56.171:15016/images/login/u253.png" alt="" />
				</view>
			</view>
			<!-- 认证企业提示 -->
			<view class="BusTips" v-if="fication==1">
				<text>您选择加入的企业需要管理员认证，注册完成后请等待企业操作</text>

			</view>
		</view>
		<view class="login" @click="gonext">
			<view class="login_btn" :style="{color:activeStyle.color,background:activeStyle.background}">
				<text>下一步</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				fication: '',
				androidIos: '',
				userId: '',
				account: '',
				appId: '', //  红端AppID
				companyId: '', //注册公司ID
				phone: '', //注册手机号
				companyName: '', //注册公司名称
				corpName: '',
				name: '', //注册姓名
				activeStyle: {
					color: '#fff',
					background: '#ec8799'
				}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onShow(e) {
			// console.log('75', e);
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			const opt = page.options;
		},
		onLoad(open) {
			this.phone = open.phone
			this.androidIos = getApp().globalData.androidIos
		},
		watch: {
			companyName(nValue, oValue) {
				if (this.companyName != '') {
					this.activeStyle.color = '#fff';
					this.activeStyle.background = '#9e001a';
				} else {
					this.activeStyle.color = '#fff';
					this.activeStyle.background = '#ec8799';
				}
			}
		},
		methods: {
			...mapMutations(['setUserInfo']),
			gonext() {
				let nameFocus = /^[^\s]/;
				// 点击注册用户信息调接口
				let data = {
					appId: this.androidIos,
					phone: this.phone,
					name: this.name,
					createSource: 1
				};
				if (!nameFocus.test(this.name)) {
					uni.showToast({
						title: '填写用户名前面不能有空格',
						icon: 'none'
					});
					this.name = '';
				} else if (this.name == '' || this.companyName == '') {
					uni.showToast({
						title: '请填写用户信息',
						icon: 'none'
					});
				} else {
					this.$httpNew.post('authApi/auth/RegisterByApp', data).then(res => {
						console.log(res, '==========================');
						if (res.accessToken) {
							uni.setStorageSync('accessToken', res.accessToken);
							uni.setStorageSync('refreshToken', res.refreshToken);
							this.$httpNew.post('authApi/auth/GetUserInfo', {
								appId: data.appId
							}).then(res1 => {
								console.log(data.appId, res1.id, res1.phone, res1.name, this.companyName,
									'res1----------------------');
								this.setUserInfo(res1);
								let joinData = {
									userId: res1.id,
									account: res1.account,
									name: res1.name,
									corpName: this.companyName,
									corpId: this.companyId
								}
								console.log('加入企业data', joinData);
								this.$httpNew.post('authApi/CorpUser/JoinCorp', joinData).then(
									joinCorp => {
										console.log('加入企业', joinCorp);
										if (joinCorp == null) {
											// 注册成功后，跳转到index首页
											uni.navigateTo({
												url: './personal?userName=' + this.name
											});
										}
									}).catch(JoinCatch => {
									console.log('报错', JoinCatch);
								})
							}).catch(infoToken => {
								// console.log('info刷新token', infoToken);
							});
						} else {
							uni.showToast({
								title: '注册失败'
							})
						}
					}).catch(byApp => {
						console.log('注册失败', byApp);
					});
				}
			},
			checkCompanye() {
				console.log(1111111111111);
				this.fication = ''
				uni.navigateTo({
					url: '/pages/company/company'
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		background-color: #fff;
	}

	.name,
	.cell,
	.company {
		border-bottom: 1rpx solid #e0e0e0;
		height: 110rpx;
		display: flex;
		align-items: center;
		color: #6a6a6a;
		font-size: 34rpx;
		padding: 0px 10rpx;

		>text {
			width: 30%;
		}

		>view {
			width: 70%;
		}
	}

	.BusTips {
		width: 100%;
		font-size: 24rpx;
		color: #b5001e;
	}

	.name {
		border-top: 1rpx solid #e0e0e0;
	}

	.usernameBox {
		padding-left: 4%;
		width: 92%;
	}

	.usernameBox>text {
		color: #000;
		font-weight: 500;
		font-size: 50rpx;
		display: block;
		line-height: 200rpx;
	}

	.company_box,
	.name_box,
	.cell_box {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: flex-end;
	}

	.cell_box input,
	.name_box input,
	.company_box input {
		text-align: right;
		margin-right: 3%;
		width: 100%;
	}

	.name_box img,
	.cell_box img,
	.company_box img {
		width: 30rpx;
		height: 30rpx;
	}

	.login {
		margin-top: 110rpx;
		width: 100%;
		height: 140rpx;
		padding: 0 40rpx;
		text-align: center;
	}

	.login .login_btn {
		line-height: 90rpx;
		// color: #fff;
		// background-color: #ec8799;
		font-size: 36rpx;
		margin-bottom: 50rpx;
		width: 90%;
		height: 90rpx;
		border-radius: 50rpx;
	}
</style>
